import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Card,
  Table,
  Modal,
  Form,
  Input,
  Button,
  Icon,
  InputNumber,
  Upload,
  Row,
  Col,
  Divider,
  Select,
  Spin,
  TreeSelect,
  message,
  Tooltip,
  Radio,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './OrgAssignment.less';
import DescriptionList from '../../components/DescriptionList';

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option, OptGroup } = Select;
const TreeNode = TreeSelect.TreeNode;
const RadioGroup = Radio.Group;

@connect(({}) => ({}))

@Form.create()
export default class OrgAssignment extends PureComponent {
    state = {
        treeSelelctValue: -1,
        modalVisible: false,

    }

    handleOrgAssignment = () => {
        this.setState({
            modalVisible: true
        })
    }

    handleOnCancel = () => {
        this.props.form.resetFields();
        this.setState({
          modalVisible: false,
        });
    };

    okHandle = () => {
        this.props.form.resetFields();
        this.setState({
          modalVisible: false,
        });
    };

    handleChange(value) {
        console.log(`selected ${value}`);
    }
    
    columns = [
        {
            title: '客户编号',
            dataIndex: 'dealersNum',
            key:'dealersNum',
        },
        {
            title: '客户姓名',
            dataIndex: 'dealersName',
            key: 'dealersName',
        }, 
        {
            title: '身份证号',
            dataIndex: 'head',
            key: 'head',
        }, 
        {
            title: '联系电话',
            dataIndex: 'contact',
            key: 'contact',
        },
        {
            title: '客户来源',
            dataIndex: 'source',
            key: 'source',
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '业务员',
            dataIndex: 'investigator',
            key: 'investigator',
        }, 
        {
            title: '操作',
            dataIndex: 'state',
            key: 'id',
            render: (text, record) => (
              <Fragment>
                  <a onClick={this.handleOrgAssignment}>分派</a>
              </Fragment>
            ),
        },
    ];

    data = [
        {
            key: '1',
            dealersNum: 'ICBC-001',
            dealersName: '张三',
            head: '320686198909059877',
            contact: '13900001111',
            source:'北汽4S店',
            createTime: '2018-6-26 11:00',
            investigator:'周启明',
        },
        {
            key: '2',
            dealersNum: 'ICBC-002',
            dealersName: '李四',
            head: '320686198925863212',
            contact: '13812523569',
            source:'奥迪4S店',
            createTime: '2018-6-26 18:00',
            investigator:'项羽非',
        },
    ];

    render(){
        const { modalVisible } = this.state;
        const { getFieldDecorator } = this.props.form;
        const { dispatch, form } = this.props;
        const Option = Select.Option;
        return(
            <PageHeaderLayout title="客户指派">
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        <Table
                            columns={this.columns}
                            dataSource={this.data}
                            rowKey="id"
                        />
                    </div>
                </Card>
                <Modal 
                    width='400px'
                    title="选择业务员"
                    visible={this.state.modalVisible}
                    onCancel={this.handleOnCancel}
                    onOk={this.okHandle}
                >
                    <FormItem labelCol={{ span: 10 }} wrapperCol={{ span: 14 }} label="选择业务员">
                        {getFieldDecorator('investigator', {
                            rules: [
                                {   
                                    required: true,
                                    message: '请选择',
                                },
                            ],
                        })(

                            <Select style={{ width: 120 }} onChange={this.handleChange}>
                                <Option value="1">李启铭</Option>
                                <Option value="lucy">张三</Option>
                                <Option value="disabled" disabled>赵里斯</Option>
                                <Option value="Yiminghe">jack</Option>
                            </Select>
                        )}
                    </FormItem>
                </Modal>
            </PageHeaderLayout>
        );
    }
}